<template>
    <!-- 字典详情 -->
    <div class="dict-detail">
        <el-card shadow="never" class="table-container">
            <template #header>
                <el-button
                    type="primary"
                    plain
                    icon="Back"
                    @click="handleLinkBack"
                    style="margin-right: auto"
                >
                    返回
                </el-button>
                <el-button
                    type="success"
                    icon="Plus"
                    @click="handleOpenDictDialog({})"
                >
                    新增
                </el-button>
            </template>
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                border
            >
                <el-table-column
                    v-for="(item, index) in columnData"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    min-width="120"
                    :width="item.width || ''"
                    :fixed="item.fixed || false"
                    show-overflow-tooltip
                    :resizable="false"
                >
                    <template #default="{ row }">
                        <span v-if="['enable'].includes(item.prop)">
                            <el-tag
                                :type="
                                    [1].includes(row[item.prop])
                                        ? 'primary'
                                        : 'warning'
                                "
                                >{{ STATUS_TYPE[row[item.prop]] }}</el-tag
                            >
                        </span>
                        <span v-else>{{ row[item.prop] }}</span>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            icon="Edit"
                            link
                            @click="handleOpenDictDialog(scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="danger"
                            icon="Delete"
                            link
                            @click="handleDelete(scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <EditDetailDialog
            :dictDetailParams="dictDetailParams"
            @close="handleCloseDictDialog"
        ></EditDetailDialog>
    </div>
</template>

<script setup>
defineOptions({ name: 'DictDetail' })
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import EditDetailDialog from './EditDetailDialog.vue'
import {
    getDictDataPage,
    deleteDataDict
} from '@views/dictManage/api/dictManage'
import { STATUS_TYPE } from '@constants/dictionary'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const columnData = ref([
    {
        label: '字典标签',
        prop: 'itemName',
        fixed: 'left'
    },
    {
        label: '字典值',
        prop: 'itemCode'
    },
    {
        label: '状态',
        prop: 'enable',
        width: 100
    },
    {
        label: '创建时间',
        prop: 'createDate',
        width: 180
    }
])
const tableData = ref([])
const dictDetailParams = reactive({ visible: false })

// 获取数据
const handleQuery = async () => {
    loading.value = true
    let { query } = { ...route }
    const res = await getDictDataPage({ classifyCode: query.classifyCode })
    loading.value = false
    if (res?.code === 200) {
        tableData.value = res.data.lookupItemList || []
    }
}

// 打开字典编辑弹窗
const handleOpenDictDialog = (row) => {
    dictDetailParams.row = row
    dictDetailParams.visible = true
}

// 关闭字典编辑弹窗
const handleCloseDictDialog = (type) => {
    console.log('关闭')
    dictDetailParams.visible = false
    if (type) handleQuery()
}

// 删除
const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除的数据项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await deleteDataDict({ id: row.id })
            if (res?.code === 200) {
                ElMessage.success('删除成功')
                handleQuery()
            }
        })
        .catch(() => {})
}

const handleLinkBack = () => {
    router.go(-1)
}

// 初始化
onMounted(() => {
    handleQuery()
    console.log('初始化')
})
</script>

<style scoped lang="scss"></style>
